<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="../libs/bulma/css/bulma.min.css" rel="stylesheet">
    <style>
        .card-footer-item {
            font-size: 13px;
        }
        
        .informetion {
            display: inline-block;
            position: absolute;
            right: 130px;
            top: 210px;
        }
        
        .informetion span {
            display: inline-block
        }
        
        .informetion span p {
            display: inherit;
        }
    </style>
</head>

<body>
    <div id="Body">
        <section class="hero is-dark">
            <div class="hero-body">
                <div class="container">
                    <h1 class="title">
                        {{title}}
                    </h1>
                    <h2 class="subtitle">
                        {{subtitle}}
                    </h2>
                </div>
            </div>
        </section>

        <section class="hero ">
            <div class="hero-body">
                <div class="container">
                    <div class="field has-addons">
                        <div class="control">
                            <input class="input" type="text" placeholder="请输入待办事件" v-model="addTotodo" ref="inputDom" @keydown="keyChangetodos">
                        </div>
                        <div class="control">
                            <a class="button is-info" @click="addTotodos">
                                添加
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="informetion">
            <span>已完成：<p >{{success}}</p></span>
            <span>未完成：<p></p></span>
        </div>
        <section class="hero ">
            <div class="hero-body">
                <div class="container">
                    <div class="columns is-multiline is-mobile">
                        <div class="column is-one-quarter" v-for='todo in todos' :key="todo.id">
                            <div class="card">
                                <div class="card-content">
                                    <div class="content">
                                        {{todo.title}}
                                    </div>
                                </div>
                                <footer class="card-footer">
                                    <span href="#" class="card-footer-item" :class="todo.isObject ? 'has-text-primary' : 'has-text-danger'">{{todo.isObject ? '已' : '未'}}完成</span>
                                    <span href="#" class="card-footer-item" @click="clickThisChange(todo)">标记{{!todo.isObject ? '已' : '未'}}完成</span>
                                    <span href="#" class="card-footer-item" @click="clickThisDelet(todo.id)">删除</span>
                                </footer>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <script src="../libs/vue/Vue.min.js"></script>
    <script>
        const vm = new Vue({
            el: '#Body',
            data: {
                title: '待办事项列表',
                subtitle: 'Tomorrow what you can do today, the saying goes.',
                todos: [{
                    id: 1,
                    title: '亲爱哒所大无大多撒多噶奥无多',
                    isObject: true
                }, {
                    id: 2,
                    title: '阿瓦大大是的归属感的风格和人家',
                    isObject: true
                }, {
                    id: 3,
                    title: '十多个符合符合人体萨尔发色或多',
                    isObject: false
                }, {
                    id: 4,
                    title: '亲爱而威尔他 外套就饿外套多噶奥无多',
                    isObject: false
                }, {
                    id: 5,
                    title: '玩儿绕弯儿玩儿儿童热帖我让却让期望我噶奥无多',
                    isObject: true
                }, {
                    id: 6,
                    title: '将通过统一人员㔿让他加体育课人',
                    isObject: false
                }],
                index: 7,
                addTotodo: '',
            },
            methods: {
                //改变标记状态
                clickThisChange(todo) {
                    todo.isObject = !todo.isObject
                },
                //删除该项
                clickThisDelet(id) {
                    this.todos = this.todos.filter(todo => todo.id !== id)
                },
                addTotodos() {
                    if (!this.addTotodo)
                        return
                    this.todos.push({
                        id: this.index++,
                        title: this.addTotodo,
                        isObject: false
                    })
                    this.addTotodo = ''
                    this.$refs.inputDom.focus()
                },
                keyChangetodos(e) {
                    if (e.keyCode === 13)
                        this.addTotodos()
                },
                success() {
                    let successNum = 0
                    if (isObject == ture)
                        successNum++
                        return successNum
                    console.log(successNum)
                }
            }
        })
    </script>
</body>

</html>